<template>
  <div style="width:80%;margin:0 auto">
    <div class="top_style" v-if="type == '0'">商家信息</div>
    <div class="mt20" style="margin-bottom: 20px"  v-if="type == '0'">
      <div class="lh30"><span>店铺名称：</span><span>{{list.shopName}}</span></div>
    </div>
    <div class="top_style">物流信息</div>
    <div class="mt20">
      <div class="lh30"><span>配送方式：</span><span>{{sendType2CH(list.sendType)}}</span></div>
      <div v-if="list.sendType!=='md'">
        <div class="lh30"><span>快递公司：</span><span>{{list.expressName}}</span></div>
        <div class="lh30"><span>运单号码：</span><span>{{list.expressOrderNo}}</span></div>
      </div>
      <div class="lh30" v-if="list.sendType==='md'"><span>门店名称：</span><span>{{list.storeName === ''?'---':list.storeName}}</span></div>
      <div class="lh30" v-if="list.sendType==='md'"><span>门店地址：</span><span>{{list.address}}</span></div>
    </div>
    <div class="mt20">
      <div class="top_style">收件人信息</div>
      <div class="mt20">
        <div class="lh30" v-if="list.sendType!=='md'"><span>收件人：</span><span>{{list.addressee}}</span></div>
        <div class="lh30" v-if="list.sendType!=='md'"><span>收件人电话：</span><span>{{list.addresseePhone}}</span></div>
        <div class="lh30" v-if="list.sendType ==='md'"><span>预订人：</span><span>{{list.addressee}}</span></div>
        <div class="lh30" v-if="list.sendType ==='md'"><span>预订人电话：</span><span>{{list.addresseePhone}}</span></div>
        <div class="lh30" v-if="list.sendType!=='md'"><span>收件地址：</span><span>{{list.address}}</span></div>
        <div class="lh30" v-if="list.sendType==='md'"><span>取货时间：</span><span>{{list.pickTime}}</span></div>
        <div class="lh30"><span>留言：</span><span>{{list.message}}</span></div>
      </div>
    </div>
    <div class="mt20">
      <div class="top_style">订单信息</div>
      <div class="mt20">
        <div class="lh30">
          <span style="display:inline-block;width:400px"><span>订单编号：</span><span>{{list.orderNo}}</span> </span>
           <span>订单状态：</span><span v-if="list.orderState===0">待付款</span>
          <span v-if="list.orderState===1">待发货</span>
          <span v-if="list.orderState===2">待收货</span>
          <span v-if="list.orderState===3">已完成</span>
          <span v-if="list.orderState===4">已关闭</span>
          <span v-if="list.orderState===5">待退款</span>
          <span v-if="list.orderState===6">已退款</span>
        </div>
        <div class="lh30"><span style="display:inline-block;width:400px"><span>下单时间：</span><span>{{formatDate(list.createTime, 'yyyy-MM-dd hh:mm:ss')}}</span></span><span>支付时间：</span><span>{{formatDate(list.payTime, 'yyyy-MM-dd hh:mm:ss')}}</span></div>
        <div></div>
      </div>
      <div class="mt20">
        <!--列表-->
        <el-table  border style="width: 100%; font-size: 12px;" :data="list.goods" row-class-name="tabRow" tooltip-effect="light"  v-loading="listLoading">
          <el-table-column align="center" show-overflow-tooltip  label="商品小图">
            <template scope="scope">
              <img :src="urlPrefix + scope.row.goodsSmallImg" width="60px" height="60px" style="margin-top: 5px"/>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="goodsName" show-overflow-tooltip label="商品名称"></el-table-column>
          <el-table-column align="center"  show-overflow-tooltip label="商品规格">
            <template scope="scope">
              <div v-if="scope.row.ggTypeOne">{{scope.row.ggTypeOne+':'+scope.row.ggOne}}</div>
              <div v-if="scope.row.ggTypeTwo">{{scope.row.ggTypeTwo+':'+scope.row.ggTwo}}</div>
              <div v-if="scope.row.ggTypeThree">{{scope.row.ggTypeThree+':'+scope.row.ggThree}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品状态">
            <template scope="scope">
              <div v-if="scope.row.state===0">正常订单</div>
              <div v-if="scope.row.state===1">退款申请中</div>
              <div v-if="scope.row.state===2">退款完成</div>
              <div v-if="scope.row.state===3">待买家发货</div>
              <div v-if="scope.row.state===4">卖家审核失败</div>
              <div v-if="scope.row.state===5">退款失败</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price" label="单价"></el-table-column>
          <el-table-column align="center" prop="count" label="数量"></el-table-column>
          <el-table-column align="center" prop="getTotal" label="优惠金额">
            <template scope="scope">
              <div>{{list.discountPrice}}</div>
            </template>
          </el-table-column>
        </el-table>
        <div class="float_div mt20">
          <div class="lh30" style="text-align:right"><span>商品总价：</span>￥<span>{{list.goodsTotalPrice}}</span></div>
          <div class="lh30" style="text-align:right"><span>运费：</span>￥<span>{{list.expressPrice}}</span></div>
          <div class="lh30" style="font-size:18px;text-align:right;margin-bottom:20px"><span>实付金额：</span>￥<span>{{list.finalPrice}}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {formatDate, sessionOut, resetBreads} from '../../smartlight/common/js/util.js'
  export default {
    data () {
      return {
        urlPrefix: '', // 图片路径前缀
        list: {
          id: 0,
          companyId: 0,
          shopId: 0,
          shopName: '',
          storeName: '',
          orderType: '',
          orderNo: '',
          orderState: '',
          goods: [],
          goodsTotalPrice: 0,
          expressPrice: 0,
          discountPrice: 0,
          finalPrice: 0,
          addressee: '',
          addresseePhone: '',
          address: '',
          pickTime: '',
          message: '',
          expressName: '',
          expressOrderNo: '',
          createTime: '',
          payTime: ''
        },
        listLoading: false,
        type: ''
      }
    },
    methods: {
      sendType2CH (type) {
        let ch = ''
        if (type === 'md') {
          ch = '门店自提'
        } else if (type === 'tc') {
          ch = '门店自提'
        } else if (type === 'express') {
          ch = '快递发货'
        }
        return ch
      },
      getList () {
        this.listLoading = true
        var para = {
          type: this.type,
          orderNo: this.$route.params.orderNo
        }
        this.$http.post('/smartLight/cx/retail/retailOrderDetail.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.list = resBody.list
            this.list.goods = JSON.parse(resBody.list.goods)
            this.listLoading = false
            // autoHeight2() // iframe调整
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      formatDate (date, gs) {
        if (date === '' || date === undefined) {
          return ''
        }
        var dates = new Date(date)
        return formatDate(dates, gs)
      }
    },
    mounted () {
      resetBreads(this)
      var user = sessionStorage.getItem('user')
      if (user) {
        this.urlPrefix = sessionStorage.getItem('prefix')
        user = JSON.parse(user)
        this.type = user.type
      }
      this.getList()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .top_style{
    border-bottom: #71b6ff solid 2px;
    font-size: 20px;
    height:40px;
  }
  .float_div{
    float right;
  }
  .lh30{
    height:30px;
    line-height:30px;
  }
  .mt20{margin-top:20px}
  .is-light{
    max-width: 600px;
  }
</style>
